<template>
  <div class="demo">
    <div class="demo-title">按钮/头像/输入框/图像</div>
    <div class="demo-content">
      <Space>
        <Skeleton.Button :active="active" :size="size" :shape="buttonShape" :block="block" />
        <Skeleton.Avatar :active="active" :size="size" :shape="avatarShape" />
        <Skeleton.Input style="width: 200px" :active="active" :size="size" />
      </Space>
      <br />
      <br />
      <Skeleton.Button :active="active" :size="size" :shape="buttonShape" :block="block" />
      <br />
      <br />
      <Skeleton.Image />
      <Divider />
      <Form layout="inline" style="margin: 16px 0">
        <Form.Item label="Active">
          <Switch v-model:checked="active" />
        </Form.Item>
        <Form.Item label="Button Block">
          <Switch v-model:checked="block" />
        </Form.Item>
        <Form.Item label="Size">
          <Radio.Group v-model:value="size">
            <Radio.Button value="default">Default</Radio.Button>
            <Radio.Button value="large">Large</Radio.Button>
            <Radio.Button value="small">Small</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="Button Shape">
          <Radio.Group v-model:value="buttonShape">
            <Radio.Button value="default">Default</Radio.Button>
            <Radio.Button value="round">Round</Radio.Button>
            <Radio.Button value="circle">Circle</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="Avatar Shape">
          <Radio.Group v-model:value="avatarShape">
            <Radio.Button value="square">Square</Radio.Button>
            <Radio.Button value="circle">Circle</Radio.Button>
          </Radio.Group>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Divider from '@sscd/divider';
  import Form from '@sscd/form';
  import Radio from '@sscd/radio';
  import Space from '@sscd/space';
  import Switch from '@sscd/switch';
  import Skeleton from '@sscd/skeleton';
  import type { SkeletonButtonProps, SkeletonAvatarProps } from '@sscd/skeleton';
  const active = ref(false);
  const block = ref(false);
  const size = ref<SkeletonButtonProps['size']>('default');
  const buttonShape = ref<SkeletonButtonProps['shape']>('default');
  const avatarShape = ref<SkeletonAvatarProps['shape']>('circle');
</script>
